<template>
  <div class="page-home">
    <h1>Home Page</h1>
    <p>Current Time: {{ new Date().toLocaleString() }}</p>
    {{ state.age }}
    <button @click="hanlderClick">点击</button>
    <ul class="stu">
      <li :key="idx" v-for="(item, idx) in state.stulist">
        {{ item.num }}--{{ item.name }}--{{ item.age }}
      </li>
    </ul>
    <img :src="loginPng" />
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import loginPng from "@/assets/login.png";

defineOptions({
  name: "HomePage"
});

const state = reactive({
  num: "00001",
  age: 19,
  stulist: [
    { num: "A0001", name: "jackie", age: Math.floor(Math.random() * 100) },
    { num: "A0002", name: "linda", age: Math.floor(Math.random() * 100) },
    { num: "A0003", name: "susan", age: Math.floor(Math.random() * 100) }
  ]
});
const hanlderClick = () => {
  state.age++;
};
</script>

<style scoped lang="scss">
.stu {
  padding: 10px;
  border: 1px solid blue;
}
</style>
